<template>
	<view class="pa-b-30">
		<!--品牌故事-->
		<view class="flex f-between f-center bg-fff pa-30">
			<view>
				<view class="font-bold">醇香麦芽精酿啤酒‌500ml</view>
				<view class="c-aaa ma-t-10">推广时间：2025-01-01 ~ 2025-06-30</view>
			</view>
			<view class="tn-icon-right c-aaa"></view>
		</view>
		<view class="flex f-center f-between t-center pa-tb-40 b-t-1-F5 bg-fff">
			<view class="width30">
				<view>售卖数</view>
				<view class="ma-t-30 tn-color-red tn-text-xxl">15695</view>
				<view class="ma-t-20">7日 <span class="tn-color-red ma-l-10">+205</span></view>
			</view>
			<view class="xian"></view>
			<view class="width30">
				<view>总金池</view>
				<view class="ma-t-30 tn-color-red tn-text-xxl">¥25869</view>
				<view class="ma-t-20">7日  <span class="tn-color-red ma-l-10">+¥2652.25</span></view>
			</view>
			<view class="xian"></view>
			<view class="width30">
				<view>已发积分</view>
				<view class="ma-t-30 tn-color-red tn-text-xxl">6802</view>
				<view class="ma-t-20">7日  <span class="tn-color-red ma-l-10">+652</span></view>
			</view>
		</view>
		<view class="ma-20 pa-lr-20 bg-fff b-r-15">
			<view class="flex f-between f-center">
				<view class="pa-lr-20 pa-tb-20  tn-text-bold tn-text-xl tn-color-black">积分&金额明细</view>
				<view class="tn-text-sm c-aaa pa-r-20">积分价<span class="tn-color-red tn-text-lg">￥2.1</span></view>
			</view>
			<view class="flex f-between pa-tb-40 b-t-1-F5 t-center">
				<view class="width30">
					<view>￥8777</view>
					<view class="ma-t-20  ">已发积分</view>
				</view>
				<view class="width30">
					<view>￥177</view>
					<view class="ma-t-20  ">已提积分</view>
				</view>
				<view class="width30">
					<view>￥77</view>
					<view class="ma-t-20  ">未提积分</view>
				</view>
			</view>
			<view class="flex f-between pa-tb-40 t-center">
				<view class="width30">
					<view>￥8777.00</view>
					<view class="ma-t-20  ">总金池</view>
				</view>
				<view class="width30">
					<view>￥177.00</view>
					<view class="ma-t-20  ">已提金额</view>
				</view>
				<view class="width30">
					<view>￥77.00</view>
					<view class="ma-t-20">未提金额</view>
				</view>
			</view>
		</view>
		<view class="bg-fff ma-20 pa-lr-20 b-r-15" @click="toPage('shareholder')">
			<view class="flex f-between f-center">
				<view class="pa-lr-20 pa-tb-20  tn-text-bold tn-text-xl tn-color-black">股东分类</view>
				<view class="tn-text-sm c-aaa pa-r-20">明细</view>
			</view>
			<view class="flex f-between pa-tb-40 t-center b-t-1-F5">
				<view class="width25">
					<view>100</view>
					<view class="ma-t-10">股东数</view>
				</view>
				<view class="width25">
					<view>26</view>
					<view class="ma-t-10">批发商</view>
				</view>
				<view class="width25">
					<view>47</view>
					<view class="ma-t-10">门店</view>
				</view>
				<view class="width25">
					<view>27</view>
					<view class="ma-t-10">帮买</view>
				</view>
			</view>
		</view>
		
		<view class="bg-fff ma-20 pa-lr-20 b-r-15">
			<view class="flex f-between f-center">
				<view class="pa-lr-20 pa-tb-20  tn-text-bold tn-text-xl tn-color-black">最新公告</view>
				<view class="tn-text-sm c-aaa pa-r-20" @click="toPage('notice')">更多</view>
			</view>
			<view class="">
				<view class="pa-20 king-list b-t-1-F5" v-for="(item,index) in noticelist" :key="index"
					@click="toPage('customerdetail',item)">
			
					<view class="flex">
						<view class="tn-icon-trusty-fill  tn-color-orangered tn-text-xxl ma-t-10"></view>
						<view class="noticecon ma-l-20">
							<view class="">{{item.name}}</view>
							<view class="flex f-between f-center ma-t-20">
								<!-- <view class="tn-color-orangered tn-text-sm tn-padding-left-xs tn-padding-right-xs tn-bg-orange--disabled tn-round">#公告</view> -->
								<view class="c-aaa tn-text-sm"><text class="tn-icon-time"></text>2025-09-28 16:57:52</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-fff ma-20 b-r-15">
			<view class="pa-tb-20" style="width: 90vw;overflow: hidden;">
				<tn-tabs :list="scrollList" :current="current"  @change="tabChange" :isScroll="false"  activeColor="#fbbd12" name="name" backgroundColor="#FFFFFF"  :barWidth="150"></tn-tabs>
			</view>
			<block v-if="current==0">
				<view class="tn-flex tn-flex-row-between tn-strip-bottom-min pa-40 b-t-1-F5"
					v-for="(item,index) in integral" :key="index">
					<view class="justify-content-item">
						<view class="c-aaa tn-text-sm">
							{{item.time}}
						</view>
						<view class="tn-text-lg ma-t-20">
							{{item.name}}
						</view>
					</view>
					<view class="justify-content-item tn-text-xl tn-padding-top">
						<view :class="'tn-color-' + item.color + ';'"> {{item.integral}} </view>
					</view>
			
				</view>
			</block>
			<block v-if="current==1">
				<view class="pa-20 pa-lr-40 bg-fff b-t-1-F5" v-for="(item,index) in 10" :key="index" >
					<view class="flex f-between f-center">
						<view class="pa-b-30 pa-t-10">
							<view class="c-aaa tn-text-sm">2024-01-25 14:25:42</view>
							<view class="ma-t-20 font-bold">故事：醇香麦芽精酿啤酒‌500ml</view>
						</view>
						<view class="c-fbbd12">已到账</view>
					</view>
					<view class="flex f-between pa-tb-40 b-t-1-F5 t-center">
						<view class="width30">
							<view>提现积分</view>
							<view class="ma-t-20 font-bold tn-color-red">￥8777.00</view>
						</view>
						<view class="width30">
							<view>积分价</view>
							<view class="ma-t-20 font-bold tn-color-red">￥177.00</view>
						</view>
						<view class="width30">
							<view>提现金额</view>
							<view class="ma-t-20 font-bold tn-color-red">￥77.00</view>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
			
				noticelist:[
					{
						name: '醇香麦芽精酿啤酒‌500ML，国庆中秋促销，10月10日前9折优惠',
						time: '2022-05-20 22:45:29',
						color: 'blue--dark',
						integral: '+10'
					}, {
						name: '‌沁爽青柠气泡水‌，国庆中秋促销，10月10日前9折优惠',
						time: '2022-05-18 20:20:50',
						color: 'purplered',
						integral: '-260'
					}, {
						name: '‌冰萃冷泡果味茶‌，国庆中秋促销，10月10日前9折优惠',
						time: '2022-05-18 18:11:19',
						color: 'blue--dark',
						integral: '+100'
					}, {
						name: '‌蜜桃乌龙风味汽水‌，国庆中秋促销，10月10日前9折优惠',
						time: '2022-05-17 13:42:42',
						color: 'blue--dark',
						integral: '+100'
					}, {
						name: '‌古法酿造米酒‌，国庆中秋促销，10月10日前9折优惠',
						time: '2022-05-16 12:14:43',
						color: 'blue--dark',
						integral: '+50'
					}, {
						name: '‌活力维C电解质水‌，国庆中秋促销，10月10日前9折优惠',
						time: '2022-05-15 10:21:08',
						color: 'blue--dark',
						integral: '+50'
					}, {
						name: '‌焦糖拿铁即饮咖啡‌，国庆中秋促销，10月10日前9折优惠',
						time: '2022-05-14 08:56:32',
						color: 'blue--dark',
						integral: '+50'
					}
				],
				integral: [{
					name: '醇香麦芽精酿啤酒‌500ML，购买2箱成功',
					time: '2022-05-20 22:45:29',
					color: 'blue--dark',
					integral: '+10'
				}, {
					name: '‌沁爽青柠气泡水‌，提现（260积分）已提交。',
					time: '2022-05-18 20:20:50',
					color: 'purplered',
					integral: '-260'
				}, {
					name: '‌冰萃冷泡果味茶‌，购买7箱成功',
					time: '2022-05-18 18:11:19',
					color: 'blue--dark',
					integral: '+100'
				}, {
					name: '‌蜜桃乌龙风味汽水‌，购买32箱成功',
					time: '2022-05-17 13:42:42',
					color: 'blue--dark',
					integral: '+100'
				}, {
					name: '‌古法酿造米酒‌，购买11箱成功',
					time: '2022-05-16 12:14:43',
					color: 'blue--dark',
					integral: '+50'
				}, {
					name: '‌活力维C电解质水‌，购买3箱成功',
					time: '2022-05-15 10:21:08',
					color: 'blue--dark',
					integral: '+50'
				}, {
					name: '‌焦糖拿铁即饮咖啡‌，购买XXXX箱成功',
					time: '2022-05-14 08:56:32',
					color: 'blue--dark',
					integral: '+50'
				}],
				current: 0,
				scrollList: [{
						name: '积分记录',
					},
					{
						name: '提现记录'
					}
				],
			}
		},
		mounted() {
			_this=this;
		},
		methods: {
			toPage(name, val) {
				if (name == "shareholder") {
					_this.utilNav.navigateTo("/pages/index/shareholder")
				}
				if (name == "notice") {
					_this.utilNav.navigateTo("/pages/index/notice")
				}
			},
			// tab选项卡切换
			tabChange(index) {
				_this.current = index
			},
		}
	}
</script>

<style>
	.xian {
		width: 1px;
		height: 100upx;
		background-color: #f5f5f5;
	}
	.king-list {
		display: block;
	}
	
	.king-list .king-icon {
		width: 100%;
		text-align: left;
		padding: 20rpx 0 20rpx 37rpx;
		font-size: 26rpx;
		color: #888;
		display: block;
	}
	
	.king-list>.king-item {
		padding: 30rpx 30rpx 30rpx 120rpx;
		position: relative;
		display: block;
		z-index: 0;
	}
	
	.king-list>.king-item::after {
		content: "";
		display: block;
		position: absolute;
		width: 1rpx;
		background-color: #E6E6E6;
		left: 60rpx;
		height: 100%;
		top: 0;
		z-index: 8;
	}
	
	.king-list>.king-item::before {
		display: block;
		position: absolute;
		top: 36rpx;
		z-index: 9;
		background-color: #ffffff;
		width: 50rpx;
		height: 50rpx;
		text-align: center;
		border: none;
		line-height: 50rpx;
		left: 36rpx;
	}
</style>
